<template>
  <div class="book">

    book页面
    <a-button @click="getbook">
      测试
    </a-button>
    <!--    {{Id}}-->
    <!--    {{Name}}-->
    <!--    {{Author}}-->

  </div>
  <a-layout>


    <table>
      <thead>
      <th>id</th>
      <th>name</th>
      <th>author</th>
      </thead>
      <tbody v-for="book in books" :key="book">
      <tr>
        <td>{{ book.Id }}</td>
        <td>{{ book.Name }}</td>
        <td>{{ book.Author }}</td>
      </tr>
      </tbody>
    </table>
  </a-layout>

  <div>
    <a-input-number id="inputNumber" v-model:value="value" :min="1" :max="10" />
    当前值：{{ value }}
  </div>
  <div class="icons-list">
    <smile-two-tone />
    <heart-two-tone two-tone-color="#eb2f96" />
    <check-circle-two-tone two-tone-color="#52c41a" />
    <wallet-two-tone />
  </div>
</template>

<script>
import ant from "ant-design-vue"
import { defineComponent, ref } from 'vue';
import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons-vue';
export default defineComponent( {
  setup() {
    const value = ref(3);
    return {
      value,
    };
  },
  name: "book",
  data() {
    return {
      // msg: "",
      // code: "",
      // Id: "",
      // Name: "",
      // Author:"",
      books: []
    }


  },
  created() {
    this.getbook()
  },
  components: {
    [ant.name]: ant,
    SmileTwoTone,
    HeartTwoTone,
    CheckCircleTwoTone,

  },
  methods: {
    getbook() {
      //回调                           成功
      this.$ajax.get("/v1/books").then((res) => {
        console.log(res)
        // console.log(res.data.userd)
        // this.code = res.data.code
        // this.msg = res.data.msg
        // this.Id = res.data.books.Id
        // this.Name = res.data.books.Name
        // this.Author = res.data.abooks.Author
        this.books = res.data.books
        //把路由设置成全局(重定向 2)
        // this.$router.push("/")
        // 失败
      }).catch(function (data) {
        console.log(data)
      })
    }
  }

})
</script>

<style scoped>
#components-layout-demo-basic .code-box-demo {
  text-align: center;
}

#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  color: #fff;
  background: #7dbcea;
}

[data-theme='dark'] #components-layout-demo-basic .ant-layout-header {
  background: #6aa0c7;
}

[data-theme='dark'] #components-layout-demo-basic .ant-layout-footer {
  background: #6aa0c7;
}

#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-demo-basic .ant-layout-sider {
  color: #fff;
  line-height: 120px;
  background: #3ba0e9;
}

[data-theme='dark'] #components-layout-demo-basic .ant-layout-sider {
  background: #3499ec;
}

#components-layout-demo-basic .ant-layout-content {
  min-height: 120px;
  color: #ffffff;
  line-height: 120px;
  background: rgba(16, 142, 233, 1);
}

[data-theme='dark'] #components-layout-demo-basic .ant-layout-content {
  background: #107bcb;
}

#components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
  margin-top: 48px;
}
.icons-list :deep(.anticon) {
  margin-right: 16px;
  font-size: 30px;
}
</style>